$width:100%;
$height:100%;
$le:left;
$ri:right;
html,
body {
    width: $width;
    height: $height;
    font-size: 0.32rem;
}

.blue {
    color: #38A5DA;
}

.orange {
    color: #FA7354;
}

.pink {
    color: #F65E7C;
}

.title {
    height: 1.28rem;
    width: $width;
    background: #38393D;
    color: #FFFFFF;
    font-size: 0.42rem;
    line-height: 1.28rem;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    ul {
        width: $width;
        li {
            display: inline-block;
            font-size: 0.42rem;
        }
        .close,
        .more {
            width: 1.25rem;
            text-align: center;
        }
        .more {
            float: right;
        }
        .option {
            border-left: 2px solid #2C2D31;
            height: 0.62rem;
            line-height: 0.62rem;
            padding-left: 0.33rem;
        }
    }
}

#page1 {
    .head_top {
        width: $width;
        overflow: hidden;
        position: fixed;
        left: 0;
        top: 1.28rem;
        z-index: 50;
        .header {
            height: 1.26rem;
            line-height: 1.26rem;
            background: #34B44C;
            border-bottom: 1px solid #5D9D6A;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            color: #FFFFFF;
            .beiji,
            .my {
                font-size: 0.4rem;
            }
            .beiji::after {
                content: "\e608";
            }
            .my::after {
                content: "\e6ff";
            }
            input {
                width: 7.96rem;
                height: 0.85rem;
                outline: none;
                border: 0;
                color: #B8B8B8;
                font-size: 0.32rem;
                padding-left: 0.78rem;
                border-radius: 0.4rem;
                background: url(../img/search.jpg) no-repeat 0.25rem center;
                background-color: #FFFFFF;
            }
        }
    }
    .container {
        margin-top: 2.54rem;
        margin-bottom: 1.3rem;
        background: #EFEFEF;
        overflow: hidden;
        .nav {
            width: 100%;
            height: 4.7rem;
            background: #FFFFFF;
            border-bottom: 0.02rem solid #EAEAEA;
            ul {
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                width: 100%;
                height: 2.35rem;
            }
            li {
                width: 20%;
                height: $height;
                a {
                    text-decoration: none;
                    display: block;
                    width: 100%;
                    height: 100%;
                    img {
                        display: block;
                        width: 1.15rem;
                        height: 1.15rem;
                        margin-left: 0.5rem;
                        margin-top: 0.2rem;
                    }
                    span {
                        display: block;
                        text-align: center;
                        width: 100%;
                        color: #777777;
                        font-size: 0.32rem;
                    }
                }
            }
        }
        .activity {
            margin-top: 0.28rem;
            background: #FFFFFF;
            height: 3rem;
            width: $width;
            div {
                width: 33%;
                float: left;
                height: $height;
                border-right: 0.02rem solid #EDEDED;
                h1,
                h2 {
                    text-align: center;
                }
                .mtitle {
                    margin-top: 0.35rem;
                    font-size: 0.36rem;
                }
                .subhead {
                    margin-top: 0.1rem;
                    font-size: 0.28rem;
                    color: #979797;
                }
            }
            div:nth-of-type(1) {
                background: url(../img/act_1.jpg) no-repeat center 1.4rem;
                background-size: 1.25rem 1.25rem;
            }
            div:nth-of-type(2) {
                background: url(../img/act_2.jpg) no-repeat center 1.4rem;
                background-size: 1.25rem 1.25rem;
            }
            div:nth-of-type(3) {
                border-right: none;
                background: url(../img/act_3.jpg) no-repeat center 1.4rem;
                background-size: 1.25rem 1.25rem;
            }
        }
        .favorable {
            margin-top: 0.28rem;
            background: #FFFFFF;
            height: 5.1rem;
            width: $width;
            overflow: hidden;
            .headline {
                width: $width;
                margin-top: 0.4rem;
                margin-bottom: 0.38rem;
                i {
                    font-weight: 800;
                    color: #FA544C;
                    font-size: 0.38rem;
                    margin-left: 0.25rem;
                }
                span {
                    float: right;
                    height: 0.45rem;
                    line-height: 0.45rem;
                    margin-right: 0.25rem;
                    color: #B8B8B8;
                    em {
                        font-style: normal;
                        font-size: 0.26rem;
                    }
                    b {
                        font-size: 0.4rem;
                    }
                }
            }
            .cont {
                width: $width;
                ul {
                    float: left;
                    width: 3.25rem;
                    margin-left: 0.25rem;
                    li {
                        margin-bottom: 0.2rem;
                        img {
                            display: block;
                            width: 100%;
                            height: 2.43rem;
                        }
                    }
                    li:nth-of-type(2) {
                        color: #2E2E2E;
                    }
                    li:nth-of-type(3) {
                        span {
                            font-size: 0.36rem;
                        }
                        i {
                            font-style: normal;
                            color: #969696;
                            text-decoration: line-through;
                        }
                    }
                }
            }
        }
        .like {
            margin-top: 0.28rem;
            background: #FFFFFF;
            width: $width;
            overflow: hidden;
            padding: 0.33rem 0.4rem 0 0.4rem;
            .headline {
                color: #757575;
                font-style: normal;
            }
            .cont {
                width: $width;
                overflow: hidden;
                .floor {
                    padding: 0.3rem 0;
                    overflow: hidden;
                    border-bottom: 0.01rem solid #E9E9E9;
                    div {
                        float: left;
                    }
                    .con_l {
                        width: 2.4rem;
                        height: 2.4rem;
                        margin-right: 0.3rem;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .con_r {
                        width: 7.35rem;
                        p {
                            margin-bottom: 0.4rem;
                            b {
                                font-size: 0.42rem;
                                font-weight: 800;
                                color: #000000;
                            }
                            span {
                                float: right;
                                color: #757575;
                                font-size: 0.26rem;
                            }
                        }
                        h2 {
                            font-size: 0.34rem;
                            color: #737373;
                            margin-bottom: 0.4rem;
                        }
                        h3 {
                            i {
                                font-size: 0.42rem;
                            }
                            b {
                                font-size: 0.26rem;
                                color: #747474;
                                text-decoration: line-through;
                            }
                            span {
                                float: right;
                                color: #757575;
                                font-size: 0.26rem;
                            }
                        }
                    }
                }
            }
        }
    }
    .footer {
        height: 1.3rem;
        width: $width;
        border-top: 2px solid #DBD6CB;
        background: #FFFFFF;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 50;
        .active {
            color: #36B34C;
        }
        div {
            width: 49%;
            float: left;
            line-height: 1.3rem;
            font-size: 0.38rem;
            text-align: center;
            .icon {
                font-size: 0.48rem;
            }
        }
        div:nth-of-type(1) {
            border-right: 0.01rem solid #E7E7E7;
        }
    }
}

#page2 {
    width: $width;
    overflow: hidden;
    background: #EFEFEF;
    margin-top: 1.28rem;
    .tgdetails {
        background: #EFEFEF;
        height: 1.02rem;
        width: $width;
        position: fixed;
        left: 0;
        top: 1.28rem;
        z-index: 50;
        div {
            float: $le;
            height: 1.02rem;
            line-height: 1.02rem;
        }
        div:nth-of-type(1) {
            width: 0.75rem;
            font-size: 0.6rem;
            text-align: center;
        }
        div:nth-of-type(2) {
            width: 0.75rem;
            font-size: 0.3rem;
            text-align: center;
        }
        div:nth-of-type(3) {
            width: 10.78rem;
            margin-left: -1.5rem;
            font-size: 0.36rem;
            text-align: center;
        }
    }
    .imgbox {
        margin-top: 1.02rem;
        width: $width;
        height: 6.97rem;
        img {
            width: $width;
            height: $height;
            display: block;
        }
    }
    .price {
        width: $width;
        padding: 0 0.4rem;
        overflow: hidden;
        background: #FFFFFF;
        border-bottom: 0.02rem solid #E6E6E6;
        margin-bottom: 0.52rem;
        h1 {
            width: 10rem;
            height: 1.32rem;
            line-height: 1.32rem;
            border-bottom: 0.01rem solid #EFEFEF;
            i {
                display: inline-block;
                font-size: 0.55rem;
                width: 1.6rem;
                text-align: left;
            }
            b {
                font-size: 0.22rem;
                color: #777777;
                text-decoration: line-through;
            }
            span {
                float: right;
                width: 2.75rem;
                height: 0.88rem;
                margin-top: 0.2rem;
                line-height: 0.88rem;
                background: #FD6633;
                color: #ffffff;
                text-align: center;
                border-radius: 0.05rem;
            }
        }
        h2 {
            width: 10rem;
            height: 0.92rem;
            line-height: 0.92rem;
            margin-bottom: 0.1rem;
            border-bottom: 0.01rem solid #EFEFEF;
            span {
                display: inline-block;
                width: 49%;
                text-align: left;
                font-size: 0.35rem;
                color: #646464;
            }
            span:nth-of-type(1)::before {
                content: '\e602';
                color: #8DBD13;
            }
            span:nth-of-type(2)::before {
                content: '\e602';
                color: #8DBD13;
            }
        }
    }
    .shangh {
        background: #FFFFFF;
        width: $width;
        overflow: hidden;
        margin-bottom: 0.28rem;
        .sh {
            padding: 0 0.4rem;
            width: 10rem;
            p {
                font-size: 0.28rem;
                margin: 0.28rem 0;
                height: 0.52rem;
                line-height: 0.52rem;
                color: #979797;
                border-bottom: 0.01rem solid #F6F6F6;
                span {
                    float: right;
                }
            }
        }
        .name {
            border-top: 0.02rem solid #E7E7E7;
            padding: 0.42rem 0.4rem 0 0.4rem;
            width: 10rem;
            overflow: hidden;
            .left {
                float: left;
                width: 8.57rem;
                h1 {
                    font-weight: 800;
                    font-size: 0.42rem;
                    color: #848484;
                }
                ul {
                    height: 1.3rem;
                    line-height: 1.3rem;
                    width: 3.5rem;
                    float: left;
                    li {
                        float: left;
                        font-size: 0.42rem;
                        margin-right: 0.08rem;
                        color: #DCDCDC;
                    }
                    li:nth-of-type(1),
                    li:nth-of-type(2),
                    li:nth-of-type(3) {
                        color: #FD6633;
                    }
                }
                span {
                    float: right;
                    height: 1.3rem;
                    line-height: 1.3rem;
                    color: #717171;
                    margin-right: 0.2rem;
                }
            }
            .right {
                float: right;
                width: 1.41rem;
                height: 1.4rem;
                line-height: 1.4rem;
                text-align: center;
                border-left: 0.02rem solid #C0C0C0;
                i {
                    font-size: 0.6rem;
                }
            }
        }
        .address {
            width: $width;
            border-top: 0.02rem solid #C0C0C0;
            p {
                margin: 0 0.4rem;
                font-size: 0.32rem;
                color: #2F2F2F;
                height: 0.92rem;
                line-height: 0.92rem;
            }
            p::before {
                content: '\e605';
            }
        }
    }
    .tgde{
        width: $width;
        overflow: hidden;
        background: #FFFFFF;
        ul{
            padding: 0 0.4rem;
            width: 10rem;
            .col1{
                color: #2E2E2E
            }
            .col2{
                color: #9D9D9D;
            }
            li{
                border-bottom:0.01rem solid #E9E9E9; 
                width: $width;
            }
            li:nth-of-type(1){
                height: 1.04rem;
                line-height: 1.04rem;
                i{
                    font-size: 0.4rem;
                }
            }
            li:nth-of-type(2){
                height: 1.42rem;
                line-height: 1.42rem;
                text-align: center;
                font-size: 0.34rem;
            }
            li:nth-of-type(3),li:nth-of-type(4){
                height: 1.10rem;
                line-height: 1.10rem;
                font-size: 0.34rem;
                span:nth-of-type(1){
                    float:left;
                }
                span:nth-of-type(2){
                    float: right;
                }
            }
            li:nth-of-type(5){  
                height: 0.76rem;
                line-height: 0.76rem;
                border: none;
                span{
                    float: right;
                    text-decoration: line-through;
                    margin-left: 0.2rem;
                }
            }
            li:nth-of-type(6){  
                height: 0.76rem;
                line-height: 0.76rem;
                border: none;
                span{
                    float: right;
                    text-decoration: line-through;
                    
                }
                b{
                    float: right;
                    font-size: 0.42rem;
                    margin-left: 0.25rem;
                }
            }
            li:nth-of-type(7){
                height: 1.44rem;
                line-height: 1.44rem;
            }
            li:nth-of-type(8){
                height: 1.44rem;
                line-height: 1.44rem;
                i{
                    font-weight: 0.3rem;
                }
            }

        }
    }
    .buy{
        width: $width;
        overflow: hidden;
        background: #FFFFFF;
        margin-top: 0.28rem;
        ul{
            padding: 0 0.4rem;
            width: 10rem;
            li{
                width: 100%;
                height: 0.8rem;
                line-height: 0.8rem;
                text-align: left;
                i{
                    font-size: 0.4rem;
                }
            }
        } 
    }
}

#page3 {
    width: $width;
    height: $height;
    margin-top: 1.28rem;
    #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #back{
        position: fixed;
        right: 0.5rem;
        bottom: 0.4rem;
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        border-radius: 50%;
        z-index: 60;
        font-size: 0.5rem;
        background: rgba(255,255,255,0.6);
    }
}
